import { innerUrls } from '@/shared/constants';
import { ReactComponent as Badge } from '@/shared/icons/Badge.svg';
import { getImageUrl } from '@/shared/lib';
import { Button } from '@/shared/ui';
import dayjs from 'dayjs';
import Image from 'next/image';

import cs from './ArticleCard.module.scss';

export const ArticleCard = ({
  image,
  id,
  date,
  title,
  isAdvertising,
}: {
  image?: string;
  id: string | number;
  date?: string;
  title: string;
  isAdvertising?: boolean;
}) => (
  <div className={cs.card}>
    <Button className={cs.link} data-testid={`link-article-${id}`} href={innerUrls.article(id)} link>
      <div className={cs.image}>
        <Image
          alt={title}
          fill
          priority
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1366px) 33vw, 33vw"
          src={getImageUrl(image)}
        />
        {isAdvertising && <Badge className={cs.badge} />}
      </div>
      <div className={cs.title}>{title}</div>
    </Button>

    <p className={cs.date}>
      {dayjs().year() === dayjs(date).year() ? dayjs(date).format('D MMMM') : dayjs(date).format('D MMMM YYYY')}
    </p>
  </div>
);
